import { useState } from 'react';
import './App.css';

function App() {

  const [newCourse, setNewCourse] = useState('');
  const [newScore, setNewScore] = useState(0);
  const [list, setList] = useState([{id:1, course:'数学', score:90}])
  const [sum, setSum] = useState(0)
  
  const add = () => {
    setSum(sum+1)
  }

  const subtract = () => {
    if(sum > 0) setSum(sum-1)
  }

  const add2 = () => {
    const newItem = {
      id: list.length + 1,
      course: newCourse,
      score: newScore
    }
    setList([...list, newItem]);
    setNewCourse('');
    setNewScore(0);
  }
  const delItem = (id) => {
    setList(list.filter(item => item.id !== id));
  }
  return (
    <div className="App">
     <div className='superbox'>
      <h1 className='title'>脚手架编写</h1>
      <div className='box'>
        <button onClick={subtract} disabled={sum<=0}>-1</button><p>当前计算:{sum}</p><button onClick={add}>+1</button>
      </div>
     </div>
     <div>
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>科目</th>
            <th>成绩</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {list.map((item) => (
            <tr key={item.id}>
              <td>{item.id}</td>
              <td>{item.course}</td>
              <td>{item.score}</td>
              <td><a href='#' onClick={()=>delItem(item.id)}>删除</a></td>
            </tr>
          ))}
          <tr className='ipt'>
           
            <td>
              <input type='text' 
                placeholder='请输入科目' 
                value={newCourse} 
                onChange={e => setNewCourse(e.target.value)}
              />
            </td>
            <td>
              <input 
                placeholder='请输入成绩' 
                value={newScore} 
                onChange={e => setNewScore(e.target.value)}
              />
            </td>
            <td>
              <button type='submit' onClick={add2}>添加</button>
            </td>
          </tr>
        </tbody>
      </table>
     </div>
    </div>
  );
}

export default App;